<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition>
        <h:form prependId="false">
            <p:idleMonitor
                timeout="#{session.maxInactiveInterval * 1000 - 20000}"
                onidle="startIdleMonitor()"
                onactive="timeoutDialog.hide()" />

            <p:dialog id="timeoutSession" 
                      widgetVar="timeoutDialog"
                      showEffect="fade" hideEffect="fade"
                      modal="true"
                      width="250"
                      height="150"
                      closable="false"
                      draggable="false"
                      resizable="false"
                      appendToBody="true"
                      onHide="stopCount() "
                      onShow="doTimer()">
                <br />

                <h:panelGroup >
                    <center>
                        <font class="texttitulo">
                            <b>Su sesión ha expirado, </b>
                            <b>se lo redireccionará en:</b>
                        </font>
                        <br/>
                        <span id="dialog-countdown" class="textcontador"></span>
                        <br/>
                        <p style="font-weight: bold;">Mueva el cursor y se reactivará su sesión</p>
                    </center>
                </h:panelGroup>

            </p:dialog>
            
        </h:form>
        <script type="text/javascript">
            $(".ui-dialog-titlebar").hide() ;
            var TIME = 10; // in seconds
            var countTimer = TIME;
            var processTimer;
            var timer_is_on = 0;
            var redirectPage = "#{request.contextPath}/index.jsp";

            var countDownDiv = "dialog-countdown";
            var txtCountDown = null;
            if (!txtCountDown)
                txtCountDown = document.getElementById(countDownDiv);

            function startIdleMonitor() {
                countTimer = TIME;
                txtCountDown.innerHTML = countTimer;
                timeoutDialog.show();
            }
            function timedCount() {
                txtCountDown.innerHTML = countTimer;
                if (countTimer == 0) {
                    stopCount();
                    window.location.href = redirectPage;
                    return;
                }
                countTimer = countTimer - 1;
                processTimer = setTimeout("timedCount()", 1000);
            }
            function doTimer() {
                if (!timer_is_on) {
                    timer_is_on = 1;
                    timedCount();
                }
            }
            function stopCount() {
                clearTimeout(processTimer);
                timer_is_on = 0;
                
            }
        </script>
    </ui:composition>
</html>
